Google の新しいデザインガイドライン「Material Design」

諏訪悠紀

2014.06.26

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Material Design

Google I/O 2014 で新しいデザインガイドラインが発表されました。

Google Design

その中で注目されるキーワードが「Material Design」です。これは直訳すると「素材のデザイン」という感じになりますが、これは現実世界の素材をメタファーとすることでユーザーにとってわかりやすくなるように考えられたデザインのようです。

ということで、Material Design について簡単にまとめつつ、どうやってデザインを始めていけばいいか考えていきたいと思います。

Google Design のガイドラインを個人的に解釈した内容を掲載しています。誤解などありましたらコメント欄にて連絡ください。喜んで修正します。

イントロダクション

まずはじめに Material Design の概要です。本文をそのまま引用します。

We challenged ourselves to create a visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design. This spec is a living document that will be updated as we continue to develop the tenets and specifics of material design.

ユーザーのことを第一に考えた Visual Language (視覚的な言語) の作成に挑戦したということが述べられています。「古典的な良いデザインの原則」と「技術や科学の可能性と革新」を融合した、そんなデザインを考えているようです。

ゴール

Material Design のゴールは次の2点と述べられています。

「古典的な良いデザインの原則」と「技術や科学の可能性と革新」を融合した Visual Language (視覚的な言語) の作成
多様なプラットフォーム・デバイスサイズ間で統一感のある体験ができる、単一の基盤となるシステムの開発

3つの原則

Material Design は、次の3つの原則に基づいて設計されています。

Material is the metaphor - Material はメタファである

Material Design では、そのデザインのメタファー(比喩)に Material (マテリアル, 素材) を取り入れています。UI や UX を紙やインクといった素材との関係性で考えることにより、アフォーダンスを生み出し、ユーザーにとってわかりやすいデザインになることを狙っているようです。

Bold, graphic, intentional - 大胆に、生き生きと、意図的に

UI や UX の要素を印刷ベース(タイポグラフィ、グリッド、スペース、色、画像の使い方)のデザインと同様に考えることによって、ユーザーを視覚的にガイドすることができます。UI の場合、これらの要素は見た目だけではなく、階層や意味、フォーカスなども作ります。色の選択やエッジまでの画像、大きなタイポグラフィ、意図的な余白などといった要素は、ユーザーを没入させるような、大胆で生き生きとしたインターフェースを生み出します。

Motion provides meaning - モーションは意味を提供する

Material Design では、オブジェクトのモーション(動き)を重要視しています。それは、モーションはユーザーを注目させ、ユーザー体験の継続性を維持するために役立つ、有意義で適切なアプローチだからです。モーション(動き)はユーザーの原動力を尊重し、そして高めることができます。ユーザーのアクションは、モーションを始めたり、デザイン全体を切り替えたりするきっかけです。モーションを用いると、オブジェクトが形状が変わったりするときに、変化の様子が分かるようになります。これによってユーザー体験の継続性が維持することができます。

ガイドライン

Material Design の詳細なガイドラインについて、簡単な解釈とリンクをまとめてみました。

アニメーション

前述したモーションについて、より具体的に述べられています。ムービー付きで分かりやすく解説されているので見ていて楽しいです。ただモーションを付ければ良いというわけではなく、ユーザーが気持ち良いモーションスピードの緩急やユーザーのアクションを起点にしている点、オブジェクトの出現・移動・変形に継続性を与えている点などに留意して読むと良いと思います。

スタイル

配色やタイポグラフィ、アイコンや画像の使い方について、適切なサイズや使い方について解説されています。基本はフラットデザインを踏襲しているように見えますが、Material Design では印刷ベースのデザインのエッセンスを取り入れているという点が異なるので、そういった観点で見ていくと良いと思います。

レイアウト

Material Design におけるレイアウトの考え方と具体的な使い方について解説されています。紙の上に印刷されていたり、紙と紙が重なったり、紙の上にオブジェクトが転がっていたりといったような、現実世界の素材の振る舞いを表現しているようです。

コンポーネント

さまざまなコンポーネント(UI パーツ)のガイドラインが解説されています。前述しているモーションや印刷ベースのデザインを適用したコンポーネントデザインが決められています。特にカードは割と新しめの考え方なので、一読しておくと良いと思います。

パターン

特徴的なユーザーのアクションのパターンについて述べられています。テキスト選択の方法やジェスチャーの意味、アクションボタンのアプローチ、画像の取り扱い方、検索バーの使い方など今までのよくあるアクションについて、具体的に解説されています。

ユーザビリティ

ユーザービリティを向上させるためのガイドラインについて述べられています。現在はアクセシビリティに関する内容だけのようです。すべての人に同様の使いやすさやユーザー体験をもたらすためには守っておくべきです。

Accessibility

Material Design の始めかた

Material Design のガイドラインは上記項目を読んでいけば何となく分かってきますが、さてどうやってデザインしていこう？というところです。そこで Google は Material Design を始めるために役立つリソースを提供してくれています。

テンプレート

Illustrator 用のテンプレート(ワイヤーフレーム)が各プラットフォーム・デバイス向けに提供されています。

AI ファイルを開くと ↓ のような感じでベクター素材を活用することができます(ちなみに Roboto フォントのインストールが必要)。捗りますね！

ステッカーシート

各コンポーネントのデザインガイドラインのページが AI ファイルで提供されています。これを元に自分のアプリ用のコンポーネントを作ったりすることもでき、便利です。しかし、ファイルサイズが大きい(50MB とか 300MB とか)ので、ネットワーク速度が良い環境でダウンロードしたほうが良いと思います。

フォント

フォントは Android のデザインではお馴染みの Roboto フォント。TTF 形式で提供されています。

Roboto Font

カラーパレット

Photoshop & Illustrator 用のスウォッチファイルも提供されています。

Color Swatches

まとめ

Material Design のコンセプトの1つである「『古典的な良いデザインの原則』と『技術や科学の可能性と革新』を融合」という考え方は個人的には非常に賛同できます。技術や科学はユーザーにとって人生をより豊かにするために存在するべきであるし、これまで人類が学んできたデザインの原則の中には時代が変わっても普遍的な原則も沢山あるので、新しいデザインと言えども取り入れるべきだと考えられるからです。デザインと開発は融合してこそ、素晴らしい UI/UX を生み出せると思います。

気が向いたら中のコンテンツの詳細も解説したいと思います。